<template>
  <!-- 日志 -->
  <div>
    <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
    <div class="pb10px">
      <!-- ctrl+alt+l 格式化代码   -->
      <el-input v-model="searchForm.perName" @input="handleSearch" class="input1" clearable placeholder="请输入权限名"
                size="small" ></el-input>
      <el-button type="primary" icon="el-icon-search" size="small" class="mr10px" @click="handleSearch">搜索</el-button>
    </div>

    <div>
      <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
      <!-- <el-button type="danger" size="small" @click="batchDelete" :disabled="ids.length>0?false:true">批量删除
      </el-button> -->
    </div>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
          align="center">
      </el-table-column>
      <el-table-column
          prop="id"
          label="ID"
          width="70"
          align="center">
      </el-table-column>
      <el-table-column
          prop="operation"
          label="操作模块"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="type"
          label="操作"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="details"
          label="详细内容"
          width="200"
          align="center">
          <template v-slot="scope">
              <el-button @click="show(scope.row)" size="mini">显示内容</el-button>
          </template>
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名"
          width="260"
          align="center">
      </el-table-column>
      <el-table-column
          prop="time"
          label="时间"
          width="260"
          align="center">
      </el-table-column>
           <!-- fixed="right"-->
      <el-table-column label="操作"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <!-- index索引 scope.row这一条数据所有的值 -->
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--自定义分页组件-->
    <custom-pages
        @current-change="currentChange"
        @size-change="sizeChange"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.pageNum"
        class="custom-pages"
    >
    </custom-pages>
    <!--自定义分页组件-->

    <!--自定义抽屉组件-->
    <custom-drawer
        :form-data="formData"
        :rules-form="ruleForm"
        @close-drawer="closeDrawer"
        @submit-drawer="submitDrawer"
        :is-drawer-dialog="isDrawerDialog"
        
    >
      <div slot="content">
        <el-form-item label="操作模块" prop="operation">
          <el-input v-model="formData.operation" placeholder="请输入操作模块"></el-input>
        </el-form-item>
        <el-form-item label="操作" prop="type">
          <el-input v-model="formData.type" placeholder="请输入操作"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
      
      </div>
    </custom-drawer>
    <!--自定义抽屉组件-->

    <el-dialog
      title="提示"
      :visible.sync="error"
      width="30%"
      append-to-body
      top="20%"
      ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
      <span>{{ message }}</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="error = false">取 消</el-button>
          <el-button type="primary" @click="error = false">确 定</el-button>
      </span>
      </el-dialog>

      <el-dialog
              title="操作的具体内容"
              :visible.sync="text"
              top="10%"
            >
              <el-card>
                <div style="font-size: 16px;">{{ content }}</div>
              </el-card>
              <div slot="footer" class="dialog-footer">
                
                <el-button type="primary" @click="text=false">确 定</el-button>
              </div>
            </el-dialog>
  </div>
</template>

<script>

//引入混入
import create from "@/mixins/create"
import http from "@/utils/request"

export default {
  data() {
    //页面格式化 ctrl+alt+l
    return {
      api: {
        pageUrl: "/system/getlog",
        saveUrl: "/system/addlog",
        delUrl: "/system/deletelog",
        modUrl: "/system/updatelog",
      },
      ruleForm: {
        operation: [
          {required: true, message: '请输入操作模块', trigger: 'blur'},
        ],
        type: [
          {required: true, message: '请输入操作', trigger: 'blur'},
        ],
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        type: [
          {required: true, message: '请输入操作', trigger: 'blur'},
        ],
      },

      formData: {
        id: null,
        operation: "", //
        type: "", //
        userName:"",

      },
      searchForm: {
        perName: ""
      },
      message:'',
      content:'暂无数据',
      text:false,
    }
  },
  mixins: [create],
  created() {
  },
  methods: {
    show(row){
          if(row.details != null){
            this.content=row.details//绑定数据
            
          }
          
          this.text=true
      },
     //提交数据
     submitDrawer(e) {
            //增加数据
            if(sessionStorage.getItem('judge') == '1'){
                http.post(this.api.saveUrl, e).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                      
                        this.getList()
                    }
                })
            }
            //修改数据
            else if(sessionStorage.getItem('judge') == '2'){
                http.put(this.api.modUrl, e).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                       
                        
                      }
                })
            }
        },
  }
};
</script>

<style scoped>
.input1{
  width: 260px;
}
.notitle{
  color: black;
  font-size:25px;
  margin-top: 1%; 
  margin-left: 0%;
}/* 面包屑 */
.custom-pages {
      position: absolute;
      /* position: relative; */
      top: 100%;
      /* 设置其始终位于页面底部 */
}
</style>